<template>
    <el-dialog v-model="dialogFormVisible" width="60%" top="5%" :title="title" @close="closeDialog" :z-index="1000">
        <el-form :model="addNewsInfoForm" ref="addNewsInfoRef" :rules="addNewsInforules">

            <div style="color:black;font-size: 18px;margin-bottom: 10px;">
                学生姓名：{{ addNewsInfoForm.title }} ｜ 总得分：{{total}}  分
            </div>


            <div v-for="item in list" style="border:2px dashed #dddddd;padding:10px;margin-top: 10px;">

                <div style="color:black;font-size: 16px;margin-bottom: 20px;">
                    <div class="sp">评价学年：{{ item[0].title }} </div>
                    <!-- <div class="sp">{{ item[0].startTime }}至{{ item[0].entTime }}</div> -->
                </div>
                <div v-for="(itm, index) in item">
                    <div v-if="itm.score == null" class="title">
                        <div>{{ itm.name }}</div>
                        <!-- <span class="sp">考核项目： {{ item.name }}</span> -->
                        <!-- <span class="sp">操作台：{{ item.address }}</span> -->
                        <!-- <span class="sp">提交人：{{ item.createName }}</span> -->
                        <!-- <span class="sp">提交人工号： {{ item.createNumber }}</span> -->
                        <!-- <span class="sp">提交时间： {{ item.createTime }}</span> -->
                    </div>
                    <div v-else class="sub-title">
                        {{ itm.name }} : {{ itm.score }} 分
                        <!-- <span class="sp">考核点：{{ item.name }}</span> -->
                        <!-- <span class="sp"> 得分：{{ item.score }}</span> -->
                    </div>
                    <div v-if="((index + 1) == item.length)" class="sp"
                        style="padding: 10px 2px;border-top: 1px solid #dedede;">
                        <div style="margin: 6px 0px;" class="title2">综合评价:</div>
                        <div style="white-space: break-spaces;">{{ itm.remark }}</div>

                        <!-- <div style="margin: 6px 0px; " class="title2">操作图片:</div>
                        <div class="demo-image">
                            <div v-for="(it, index ) in itm.imagesArr" class="block">
                                <el-image style="width: 100px; height: 100px" :src="it"
                                    :preview-src-list="itm.imagesArr" :initial-index="index" fit="cover" />
                            </div>
                        </div>

                        <div style="margin:10px 0px;" class="title2">试卷图片:</div>
                        <div class="demo-image">
                            <div v-for="(it, index ) in itm.imagesArr1" class="block">
                                <el-image style="width: 100px; height: 100px" :src="it"
                                    :preview-src-list="itm.imagesArr" :initial-index="index" fit="cover" />
                            </div>
                        </div> -->
                        <!-- <span class="sp">考核项目： {{ item.name }}</span> -->
                        <!-- <span class="sp">操作台：{{ item.address }}</span> -->
                        <!-- <span class="sp">提交人：{{ item.createName }}</span> -->
                        <!-- <span class="sp">提交人工号： {{ item.createNumber }}</span> -->
                        <!-- <span class="sp">提交时间： {{ item.createTime }}</span> -->
                    </div>
                </div>
            </div>



        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel()">关闭</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm } from "element-plus";
import { vxRule } from "@/utils/validator";
export default {
    name: "catEvReview",
    components: { ElForm, ElMessage },

    mounted() {
    },
    data() {
        return {
            dialogFormVisible: ref(false),
            formLabelWidth: "120px",
            title: "",
            personnelType: "",
            domain: sessionStorage.getItem("domain"),
            list: [

            ],
            readFileList: [

            ],
            total:0,
            testTitle: '',
            addNewsInfoForm: {
                title: "",
                subTitle: "",
                url: "",
                urls: [],
                img: "",
                ofSource: "",
                content: "",
                brief: "",
                status: "",
                articleTime: "",
            },
            // 校验规则
            addNewsInforules: {
                title: vxRule(true, null, "blur"),
                url: vxRule(true, null, "blur"),
                img: vxRule(true, null, "blur"),
                articleTime: vxRule(true, null, "blur"),
            },
        };
    },

    methods: {

        closeDialog() {
            this.clear();
        },
        cancel() {
            this.dialogFormVisible = false;
            this.clear();
        },
        queryAllByStudentNumberReviewId(id, studentNumber) {
            httpService("/javaApi/evAnswerTop/queryAllByStudentNumberReviewId", { reviewId: id, studentNumber: studentNumber }, "get").then(
                (data) => {
                    this.list = data;
                    console.log(data)
                }
            );
        },
        clear() {
            this.dialogFormVisible = false;
            //清空form
            this.addNewsInfoForm.id = "";
            this.addNewsInfoForm.title = "";
            this.addNewsInfoForm.subTitle = "";
            this.addNewsInfoForm.url = "";
            this.addNewsInfoForm.img = "";
            this.addNewsInfoForm.ofSource = "";
            this.addNewsInfoForm.content = "";
            this.addNewsInfoForm.brief = "";
            this.addNewsInfoForm.status = "";
            this.addNewsInfoForm.articleTime = "";
            this.addNewsInfoForm.createTime = "";
            this.fileList = []
            this.readFileList = []
        },
    },
};
</script>
<style>
.sp {
    font-size: 16px;
    color: black;
    margin-top: 10px;
}

.title {
    font-size: 17px;
    color: #409EFF;
    padding: 10px 5px;
    margin-top: 6px;
    border-top: 1px solid #dedede;
}

.title2 {
    font-size: 17px;
    color: #409EFF;
    margin-top: 6px;
padding: 10px 0px;
    border-bottom: 1px solid #dedede;
}

.sub-title {
    color: #444444;
    font-size: 16px;
    padding: 5px;


}

.demo-image .block {
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    display: inline-block;
    width: 100px;
    margin-right: 10px;
    box-sizing: border-box;
    vertical-align: top;
}

.demo-image .block:last-child {
    border-right: none;
}

.demo-image .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}
</style>